<template>
  <div class="form">
    <el-form ref="form" labelWidth="105px" :model="formData"
             :rules="rules">
      <el-form-item label="地址信息:" prop="address">
        <el-cascader
          ref="myCascader"
          @change="handleChange"
          style="width: 340px"
          v-model="formData.address"
          :options="addressList"
          clearable
          placeholder="请选择地址"
        ></el-cascader>
      </el-form-item>
      <!-- 详细地址 -->
      <el-form-item
        style="margin-top: 20px"
        label="详细地址:"
        prop="detailsAddress"
      >
        <el-input
          style="width: 340px"
          type="textarea"
          v-model="formData.detailsAddress"
          placeholder="请输入详细地址信息，如道路、门牌号、小
区、楼栋号、单元等信息"
        ></el-input>
      </el-form-item>
      <!-- 收货人姓名 -->
      <el-form-item
        style="margin-top: 20px"
        label="收货人姓名:"
        prop="receiver"
      >
        <el-input
          style="width: 340px"
          v-model="formData.receiver"
          placeholder="请输入收货人姓名"
        ></el-input>
      </el-form-item>
      <!-- 手机号码 -->
      <el-form-item style="margin-top: 20px" label="手机号码" prop="mobile">
        <el-input
          style="width: 340px"
          placeholder="请输入您的手机号码"
          v-model="formData.mobile"
          class="input-with-select"
        >
          <el-select
            size="small"
            style="width: 140px"
            v-model="select"
            slot="prepend"
            placeholder="请选择"
          >
            <el-option label="中国大陆 +86" value="1"></el-option>
            <el-option label="中国大陆 +87" value="2"></el-option>
            <el-option label="中国大陆 +88" value="3"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <!-- 复选框 -->
      <el-form-item labelWidth="10px" style="margin-top: 20px">
        <el-checkbox
          :true-label="1"
          :false-label="0"
          v-model="formData.isDefault"
        >设置为默认收货地址
        </el-checkbox>
      </el-form-item>
      <!-- 确认按钮 -->
      <el-form-item labelWidth="10px" style="margin-top: 20px">
        <el-button class="btn" type="primary" @click="handleOK('form')"
        >确认
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import areaJson from './area.json'
import { addAddress } from '@/framework/api/user'

export default {
  name: 'address-con' /* 注册组件 */,
  components: {},
  /* 接受父组件传过来的数据 */
  props: {},

  /* 数据 */
  data() {
    return {
      select: '1',
      formData: {
        address: '',
        // 详细地址
        detailsAddress: '',
        // 收货人姓名
        receiver: '',
        // 手机号码
        mobile: '',
        // 省编码
        provinceCode: '',
        // 市编码
        cityCode: '',
        // 区编码
        districtCode: '',
        isDefault: 0,
        // 省
        province: '',
        // 市
        city: '',
        // 区
        district: ''
      },
      rules: {
        address: [{ required: true, message: '请选择地址', trigger: 'change' }],
        detailsAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ]
      },
      addressList: areaJson
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {},

  /* 初始化阶段 */
  created() {},

  /* 方法 */
  methods: {
    handleChange(value) {
      const res = this.$refs['myCascader'].getCheckedNodes()[0].pathLabels
      this.formData.province = res[0]
      this.formData.city = res[1]
      this.formData.district = res[2]
      this.formData.provinceCode = value[0]
      this.formData.cityCode = value[1]
      this.formData.districtCode = value[2]
    },
    handleOK(formName) {
      // 验证表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 去除表单中的 address
          delete this.formData.address
          this.formData.fullAddress =
            this.formData.province +
            this.formData.city +
            this.formData.district +
            this.formData.detailsAddress
          addAddress(this.formData)
            .then((res) => {
              if (res.code === '00000') {
                this.$message.success('添加成功')
                // 清空表单
                this.$refs[formName].resetFields()
                // 关闭弹窗
                this.$emit('close')
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  width: 447px;

  ::v-deep .el-checkbox {
    // 选框
    .el-checkbox__inner {
      width: 16px;
      height: 16px;
      border-radius: 50%;

      // 中间的 “✔” 的位置调整
      &::after {
        left: 5px;
        top: 2px;
      }
    }
  }

  .btn {
    width: 146px;
    height: 40px;
    border-radius: 4px;
    background: #1289ff;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
  }
}
</style>
